<template>
  <div style="border:1px solid #CCC;height:100%">
      <rm-layout-left movingcolor="#0000ff" :fixsize=200>
          <template v-slot:fix>
              <div style="height:100%;overflow:hidden;border-right:1px solid #CCC">
                  <div style="margin:2px 0px 5px 2px;height:5%">
                      <table style="width:100%">
                          <tr>
                              <td style="width:30px">
                                  <font style="font-size:12px">检索</font>
                              </td>
                              <td>
                                  <el-input v-model="txtsearch" placeholder="查找文档" @keyup.enter.native="search" clearable @clear="clearFun"></el-input>
                              </td>
                          </tr>
                      </table>
                  </div>
                  <div class="left_nav">
                      <div v-for="(titem, tindex) in contentList" :class="currentIndex == tindex ? 'active' : ''" :key="tindex" @click="goAnchor(tindex)" v-html="titem.title ">
                      </div>
                  </div>
              </div>
          </template>
          <div class="right_content" ref="ScrollMainContent">
              <div>
                  <div v-for="(item,sindex) in contentList" :key="sindex">
                      <div :id="'anchor-'+sindex" class="scroll_title" v-html="item.title"></div>
                      <div class="scroll_content" v-for="(items,index) in item.content" :key="index" v-html="items"></div>
                  </div>
              </div>
          </div>
      </rm-layout-left>
  </div>
</template>

<script>
import XEUtils from "xe-utils";
export default {
  name: "upgradelog",
  data() {
      return {
          txtsearch: "",
          currentIndex: 0,
          catchScroll: true,
          tempList: [],
          contentList: []
      };
  },
  created() {
      this.initPage();
  },
  watch: {
      txtsearch(val, oldval) {
          if (val == "") {
              this.search();
          }
      }
  },
  mounted() {
      this.$refs.ScrollMainContent.addEventListener("scroll", this.handleScroll);
  },

  beforeDestroy() {
      this.$refs.ScrollMainContent.removeEventListener("scroll", this.handleScroll); // 销毁 scroll 事件
  },
  methods: {
      handleScroll(e) {
          if (!this.catchScroll) return;
          let _scrollTop = e.target.scrollTop,
              _article = document.querySelectorAll("div.scroll_title");

          for (let i = 0; i < _article.length; i++) {
              if (_scrollTop + 1 >= _article[i].offsetTop) {
                  this.currentIndex = i;
              }
          }

          if (e.target.scrollTop + 1 >= e.target.scrollHeight - e.target.offsetHeight) {
              //滚动到最后
              this.currentIndex = _article.length - 1;
          }
      },
      goAnchor(index) {
          var that = this;
          this.currentIndex = index; // 把当前点击时获取的 index 赋值给 currentIndex；如果两者相等，则显示高亮

          let anchor = this.$el.querySelector("#anchor-" + index),
              _offsetTop = anchor.offsetTop,
              _scrollTop = this.$refs.ScrollMainContent.scrollTop,
              step = (_offsetTop / 50) >> 0; // 平滑滚动平均分成 50 份，取整

          if (_offsetTop > _scrollTop) {
              anchorDown();
          } else {
              let newOffsetTop = _scrollTop - _offsetTop;
              step = (newOffsetTop / 50) >> 0;
              anchorUp();
          }

          function anchorDown() {
              if (_scrollTop < _offsetTop && step > 0) {
                  _scrollTop += step;
                  that.catchScroll = false;
                  that.$refs.ScrollMainContent.scrollTop = _scrollTop;
                  setTimeout(anchorDown, 10);
              } else {
                  that.catchScroll = true;
                  that.$refs.ScrollMainContent.scrollTop = _offsetTop;
              }
          }
          function anchorUp() {
              if (_scrollTop > _offsetTop && step > 0) {
                  _scrollTop -= step;
                  that.catchScroll = false;
                  that.$refs.ScrollMainContent.scrollTop = _scrollTop;
                  setTimeout(anchorUp, 10);
              } else {
                  that.catchScroll = true;
                  that.$refs.ScrollMainContent.scrollTop = _offsetTop;
              }
          }
      },
      initPage() {
          this.$nextTick(async () => {
              try {
                  const resp = await this.$tool.request({
                      url: "/ucent/upgrade",
                      method: "post",
                      data: {
                          action: "upgradeLog"
                      }
                  });
                  this.contentList = [];
                  this.tempList = [];
                  var obj = resp.dic;
                  for (var key in obj) {
                      this.tempList.push({ title: key, content: obj[key].m_StringValue.split("\n") });
                  }
                  this.contentList = XEUtils.clone(this.tempList, true);
              } catch (e) {
                  this.$message.warning(e);
              }
          });
      },
      search() {
          let newdata = [];
          let tempstr = [];
          let titlestr = "";
          let flag = false;
          // let indexkey = [];

          let filterName = this.txtsearch.trim();
          this.contentList = XEUtils.clone(this.tempList, true);
          if (filterName != "") {
              this.contentList.forEach((item, index) => {
                  tempstr = [];
                  flag = false;
                  titlestr = item.title;
                  item.content.forEach(ele => {
                      if (ele.indexOf(filterName) > -1) {
                          ele = ele.replace(filterName, "<span style='background-color:yellow'>" + filterName + "</span>");
                          flag = true;
                      }
                      tempstr.push(ele);
                  });
                  if (flag) {
                      titlestr = "<span style='color:red'>" + titlestr + "</span>";
                      // indexkey.push(index);
                  }
                  newdata.push({ title: titlestr, content: tempstr });
              });
              this.contentList = newdata;
          }
      },
      clearFun() {
          this.search();
      }
  }
};
</script>

<style scoped>
.left_nav {
  width: 100%;
  text-align: center;
  height: 95%;
  overflow: auto;
}
.left_nav div {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
}
.left_nav .active {
  background-color: DeepSkyBlue;
}

.scroll_title {
  padding: 20px 30px 10px 30px;
  color: #000;
  font-size: 20px;
  font-weight: 400;
}
.scroll_content {
  line-height: 30px;
  color: #5e6267;
  font-size: 14px;
  text-decoration: none;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  padding-left: 50px;
}
.right_content {
  text-align: left;
  height: 100%;
  width: 100%;
  overflow: auto;
}
</style>
